
/*
 * @Author: ChengNan 1429323234@qq.com
 * @Date: 2024-08-01 14:02:41
 * @LastEditors: ChengNan 1429323234@qq.com
 * @LastEditTime: 2024-08-01 17:49:18
 * @FilePath: /src/views/9.comRender/RVComp.js
 * @Description: 
 */
export default {
    name: 'RVComp',
    props: ['modelValue'],
    computed: {
      data: {
        get() {
          return this.modelValue 
        },
        set(newValue) {
          this.$emit('update:modelValue', newValue)
        }
      }
    },
    render(h) {
      this.data = this.modelValue
      // console.log('scopedSlots',  this.data.content, this.data.vKey);
      // 1、解析字符串
      // 解析模版 '这是一个测试 { $RV key } 和 { $RV key }'
      // eg: ['这是一个测试 ', ' $RV key ', ' 和 ', ' $RV key ']
      // 由于被分割的字符缺失 { } 所以需要补全
      const complex = this.data.content.split(/\{([^}]*)\}/).map(el => el.includes('$RV') ?  `{${el}}` : el)
      // 2、创建html dom
      const dom = this.createElementByComplex(h, complex)
      return h('div', {}, dom)
    },
    methods: {
      createElementByComplex(h, complex) {
        let renderDoms = []
        complex.forEach(el => {
          if (el.includes('$RV')) {
            
            // 1、包含 $RV 的元素
            // 2、解析字符串 '{ $RV key }' key
            const key = el.replace(/\{|\}|(\$RV)/g, '').trim()
            // 3、建立input与data的绑定
            const hDom = h('Input', {
              style: 'display: inline-block; width: 100px;',
              props: {
                value: this.data.vKey[key]
              },
              on: {
                input: val => {
                  this.data.vKey[key] = val
                }
              }
            })
            renderDoms.push(hDom)
          } else {
            // 没有包含 $RV 的元素
            renderDoms.push(h('span', {}, el))
          }
        });
        return renderDoms
      },
    },
}